<template>
  <view class="bottom-card" :class="btype == 'notlogin' ? '' : 'isLoginBg'">
    <template v-if="btype == 'notlogin'">
      <view>补全资料，体验完整功能</view>
      <custom-btn :style="btnStyle" @click="toRegister">去完善</custom-btn>
    </template>
    <template v-if="btype == 'phone'">
      <view class="bottom-con">
        <view class="b-text">您还未登记联系方式</view>
        <view class="b-desc">其他亲家无法联系您</view>
      </view>
      <custom-btn :style="loginStyle" @click="toPhone">去完善</custom-btn>
    </template>

    <template v-else-if="btype == 'complete'">
      <view class="bottom-con">
        <view class="b-text">您还未完善孩子资料</view>
        <view class="b-desc">很多家长想了解孩子的更多信息</view>
      </view>
      <custom-btn :style="loginStyle" @click="toComplete">去完善</custom-btn>
    </template>
  </view>
</template>

<script setup>
const props = defineProps({
  btype: {
    type: String,
    default: "",
  },
});

const btnStyle = shallowReactive({
  color: "#FF5C55",
  fontSize: "36rpx",
  fontWeight: 800,
  borderColor: "#fff",
  borderRadius: "120rpx",
  lineHeight: "80rpx",
  width: "220rpx",
  height: "80rpx",
  background: "#fff",
});
const loginStyle = shallowReactive({
  color: "#fff",
  fontSize: "36rpx",
  fontWeight: 800,
  borderColor: "#FF5C55",
  borderRadius: "120rpx",
  lineHeight: "80rpx",
  width: "220rpx",
  height: "80rpx",
  background: "#FF5C55",
});
const isLogin = ref(false);
const toRegister = () => {
  uni.navigateTo({ url: "/subPages/register/index" });
};

const toComplete = () => {
  uni.navigateTo({ url: "/subPages/complete/index" });
};

const toPhone = () => {
  uni.navigateTo({ url: "/subPages/register/contact" });
};
</script>

<style lang=scss scoped>
.bottom-card {
  @include flexAlignCenter;
  justify-content: space-between;
  height: 140rpx;
  padding: 0 30rpx;
  margin: 0 20rpx;
  background: linear-gradient(90deg, #fd6d4b 0%, #ff5174 100%);
  border-radius: 10rpx;
  font-weight: bold;
  font-size: 36rpx;
  color: #fff;
  margin-bottom: 20rpx;
}
.isLoginBg {
  background: #202020 !important;
}
.bottom-con {
  color: #fff;
  .b-text {
    font-size: 36rpx;
    font-weight: bold;
  }
  .b-desc {
    font-size: 28rpx;
    font-weight: 500;
  }
}
</style>